<template>
  <h1>Index 组件</h1>
  <button @click="flag = !flag">toggle</button>
  <hr />

  <!-- 使用加载好的本地异步组件 -->
  <AdminPage v-if="flag" />
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue'
import Loading from './Loading.vue'
import ErrorPage from './ErrorPage.vue'

const flag = ref(false)

// const AdminPage = defineAsyncComponent(() => import('./AsyncCom.vue'))

const AdminPage = defineAsyncComponent({
  loader: () => import('./AsyncCom.vue'),
  loadingComponent: Loading,
  delay: 200,
  timeout: 1000,
  errorComponent: ErrorPage
})
</script>

<style scoped></style>
